import React from 'react';
import type { Meta, StoryObj } from '@storybook/react';
import { Tabs, TabsList, TabsTrigger, TabsContent } from '../../components/ui/tabs';

const LONG_TABS_DATA = [
  { value: 'overview', label: '概览' },
  { value: 'analytics', label: '数据分析' },
  { value: 'reports', label: '报表中心' },
  { value: 'customers', label: '客户管理' },
  { value: 'products', label: '产品列表' },
  { value: 'orders', label: '订单管理' },
  { value: 'inventory', label: '库存' },
  { value: 'shipping', label: '物流配送' },
  { value: 'returns', label: '退换货' },
  { value: 'settings', label: '系统设置' },
];

const meta: Meta<typeof Tabs> = {
  title: 'UI/Tabs',
  component: Tabs,
  tags: ['autodocs'],
};

export default meta;
type Story = StoryObj<typeof Tabs>;

export const Default: Story = {
  render: () => (
    <Tabs defaultValue="account" className="w-[400px]">
      <TabsList>
        <TabsTrigger value="account">账户</TabsTrigger>
        <TabsTrigger value="password">密码</TabsTrigger>
        <TabsTrigger value="settings">设置</TabsTrigger>
      </TabsList>
      <TabsContent value="account" className="p-4">
        <h3 className="text-lg font-medium">账户信息</h3>
        <p className="text-sm text-gray-500 mt-2">
          在这里管理您的账户信息和个人资料设置。
        </p>
      </TabsContent>
      <TabsContent value="password" className="p-4">
        <h3 className="text-lg font-medium">修改密码</h3>
        <p className="text-sm text-gray-500 mt-2">
          在这里更改您的密码和安全设置。
        </p>
      </TabsContent>
      <TabsContent value="settings" className="p-4">
        <h3 className="text-lg font-medium">应用设置</h3>
        <p className="text-sm text-gray-500 mt-2">
          在这里管理应用程序的偏好设置和通知。
        </p>
      </TabsContent>
    </Tabs>
  ),
};

export const WithForm: Story = {
  render: () => (
    <Tabs defaultValue="account" className="w-[400px]">
      <TabsList className="grid w-full grid-cols-2">
        <TabsTrigger value="account">账户</TabsTrigger>
        <TabsTrigger value="password">密码</TabsTrigger>
      </TabsList>
      <TabsContent value="account" className="p-4 border rounded-md mt-2">
        <div className="space-y-4">
          <div>
            <label htmlFor="name" className="text-sm font-medium">姓名</label>
            <input id="name" className="w-full mt-1 p-2 border rounded" placeholder="请输入姓名" />
          </div>
          <div>
            <label htmlFor="email" className="text-sm font-medium">邮箱</label>
            <input id="email" className="w-full mt-1 p-2 border rounded" placeholder="请输入邮箱" />
          </div>
          <button className="px-4 py-2 bg-blue-500 text-white rounded">保存</button>
        </div>
      </TabsContent>
      <TabsContent value="password" className="p-4 border rounded-md mt-2">
        <div className="space-y-4">
          <div>
            <label htmlFor="current" className="text-sm font-medium">当前密码</label>
            <input id="current" type="password" className="w-full mt-1 p-2 border rounded" />
          </div>
          <div>
            <label htmlFor="new" className="text-sm font-medium">新密码</label>
            <input id="new" type="password" className="w-full mt-1 p-2 border rounded" />
          </div>
          <button className="px-4 py-2 bg-blue-500 text-white rounded">更改密码</button>
        </div>
      </TabsContent>
    </Tabs>
  ),
};

export const ScrollMode: Story = {
  render: () => (
    <div className="w-[500px] border p-4 rounded-lg">
      <p className="text-sm text-muted-foreground mb-4">👇 试试调整浏览器窗口大小,当宽度不够时会出现滚动箭头</p>
      <Tabs defaultValue="overview">
        <TabsList>
          {LONG_TABS_DATA.map((tab) => (
            <TabsTrigger key={tab.value} value={tab.value}>
              {tab.label}
            </TabsTrigger>
          ))}
        </TabsList>
        {LONG_TABS_DATA.map((tab) => (
          <TabsContent key={tab.value} value={tab.value} className="p-4">
            <h3 className="text-lg font-medium">{tab.label}</h3>
            <p className="text-sm text-gray-500 mt-2">
              这是 {tab.label} 的内容区域。
            </p>
          </TabsContent>
        ))}
      </Tabs>
    </div>
  ),
};

export const DropdownMode: Story = {
  render: () => (
    <div className="w-[500px] border p-4 rounded-lg">
      <p className="text-sm text-muted-foreground mb-4">👇 试试调整浏览器窗口大小,当宽度不够时多余选项会收入下拉菜单</p>
      <Tabs defaultValue="overview">
        <TabsList mode="dropdown">
          {LONG_TABS_DATA.map((tab) => (
            <TabsTrigger key={tab.value} value={tab.value}>
              {tab.label}
            </TabsTrigger>
          ))}
        </TabsList>
        {LONG_TABS_DATA.map((tab) => (
          <TabsContent key={tab.value} value={tab.value} className="p-4">
            <h3 className="text-lg font-medium">{tab.label}</h3>
            <p className="text-sm text-gray-500 mt-2">
              这是 {tab.label} 的内容区域。
            </p>
          </TabsContent>
        ))}
      </Tabs>
    </div>
  ),
};

export const Disabled: Story = {
  render: () => (
    <Tabs defaultValue="active" className="w-[400px]">
      <TabsList>
        <TabsTrigger value="active">活动</TabsTrigger>
        <TabsTrigger value="inactive">非活动</TabsTrigger>
        <TabsTrigger value="disabled" disabled>禁用</TabsTrigger>
      </TabsList>
      <TabsContent value="active" className="p-4">
        <p>活动标签内容</p>
      </TabsContent>
      <TabsContent value="inactive" className="p-4">
        <p>非活动标签内容</p>
      </TabsContent>
      <TabsContent value="disabled" className="p-4">
        <p>禁用标签内容</p>
      </TabsContent>
    </Tabs>
  ),
};
